<template>
	<div class="floor26">
        <div class="item" @click="selectPay('qb')">
			<van-cell title="钱包支付">
			   <div slot="icon">
			    	<img src="../../../../static/img/qb.png" alt="" class="qbImg"/>
			   </div>
               <div slot="right-icon">
               	    <img src="../../../../static/img/xz.png" alt="" class="x" v-if="qb"/>
               	    <img src="../../../../static/img/dx.png" alt="" class="x" v-else/>
               </div>
			</van-cell>
        </div>
        <div class="item" @click="selectPay('ali')">
			<van-cell title="支付宝支付">
			   <div slot="icon">
			    	<img src="../../../../static/img/ali.png" alt="" class="aliImg"/>
			   </div>				
               <div slot="right-icon">
               	    <img src="../../../../static/img/xz.png" alt="" class="x" v-if="ali"/>
               	    <img src="../../../../static/img/dx.png" alt="" class="x" v-else/>
               </div>
			</van-cell>        	
        </div>
        <div class="item" @click="selectPay('wx')">
			<van-cell title="微信支付">
			   <div slot="icon">
			    	<img src="../../../../static/img/wx.png" alt="" class="wxImg"/>
			   </div>				
               <div slot="right-icon">
               	    <img src="../../../../static/img/xz.png" alt="" class="x" v-if="wx"/>
               	    <img src="../../../../static/img/dx.png" alt="" class="x" v-else/>
               </div>
			</van-cell>        	
        </div>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
           qb:true,
           ali:true,
           wx:false
       }
	},
	methods: {	
        selectPay(key){
           if(key=='qb'){
           	 this.qb=!this.qb 
           }else if(key=='ali'){
           	 if(this.ali){
           	 	this.ali=false
           	 }else{
	           	 if(this.wx){
	               this.wx=false
	           	 }
	           	 this.ali=true        	 	
           	 }
           }else if(key=='wx'){
           	 if(this.wx){
           	 	this.wx=false
           	 }else{
	           	 if(this.ali){
	           	 	this.ali=false
	           	 }
	           	 this.wx=true	           	            	 	
           	 }
           }
        }
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="" lang="scss">
.floor26{background: #fff;}
.qbImg,.aliImg,.wxImg{width: 22px;height: 22px;display: block;margin-right: 8px;}
.x{width: 20px;height: 20px;display: block;}
</style>